<template>
  <div class="homepage-container">
    <van-nav-bar
      :title="userData.name"
      left-arrow
      @click-left="$router.push({
        name: 'my'
      })"
    />
    <van-cell>
      <van-row slot="title">
        <van-col span="6">
          <van-image
            :src="userData.photo"
            width="66"
            height="66"
            fit="cover"
            round
          ></van-image>
        </van-col>
        <van-col span="18">
          <van-grid :border="false">
            <van-grid-item>
              <div slot="text" class="item">
                <div class="count">{{ userData.art_count }}</div>
                <div class="text">头条</div>
              </div>
            </van-grid-item>
            <van-grid-item>
              <div slot="text" class="item">
                <div class="count">{{ userData.follow_count }}</div>
                <div class="text">关注</div>
              </div>
            </van-grid-item>
            <van-grid-item>
              <div slot="text" class="item">
                <div class="count">{{ userData.fans_count }}</div>
                <div class="text">粉丝</div>
              </div>
            </van-grid-item>
            <van-grid-item>
              <div slot="text" class="item">
                <div class="count">{{ userData.like_count }}</div>
                <div class="text">获赞</div>
              </div>
            </van-grid-item>
          </van-grid>
          <div class="btn">
            <van-button type="primary" size="small">私信</van-button>
            <van-button type="danger" size="small">关注</van-button>
          </div>
        </van-col>
      </van-row>
    </van-cell>
    <van-list
      v-model="upDownLoading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="(article, index) in articlesLists" :key="index">
        <article-items :article="article"></article-items>
      </van-cell>
    </van-list>
  </div>
</template>
<script>
import articleItems from '@/components/articleItem'
import { getUserInfo, getUserArticles } from '@/api/my'
export default {
  name: 'homePage',
  data () {
    return {
      // 用户个人信息
      userData: [],
      // 当前页
      page: 1,
      // 每页条数
      per_page: 10,
      // 用户发表的文章列表
      articlesLists: [],
      upDownLoading: false,
      finished: false
    }
  },
  props: {
    user_id: {
      type: [Number, String, Object],
      required: true
    }
  },
  components: {
    articleItems
  },
  methods: {
    // 获取用户个人信息
    async UserInfo () {
      const res = await getUserInfo()
      this.userData = res.data.data
    },
    // 获取当前用户发表的文章
    async onLoad () {
      const res = await getUserArticles({
        page: this.page,
        per_page: this.per_page
      })
      this.articlesLists.push(...res.data.data.results)
      // 加载状态结束
      this.upDownLoading = false

      // 判断articlesLists数组长度是否等于0来决定加载状态是否结束
      if (this.articlesLists.length) {
        // 上拉加载更多
        this.page = this.page++
      } else {
        // 数据全部加载完成
        this.finished = true
      }
    }
  },
  created () {
    this.UserInfo()
  }
}
</script>
<style lang="less">
.homepage-container{
  padding-top: 46px;
  .van-nav-bar{
    position: fixed;
    left: 0;
    right: 0;
    top: 0
  }
  .van-cell{
    .van-row{
      display: flex;
      justify-content: center;
      align-items: center;
      .van-col--18{
        .van-grid-item{
          text-align: center;
        }
        .btn{
          display: flex;
          justify-content: space-between;
          align-items: center;
          button{
            width: 45%;
          }
        }
      }
    }
  }
}
</style>
